<template>
  <h3>分类</h3>
  <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
  <van-popup v-model:show="show" round position="bottom">
    <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false" @finish="onFinish" />
  </van-popup>

</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useCascaderAreaData } from '@vant/area-data';
// vant提供的类型
import type { CascaderOption } from 'vant';
const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
const options = useCascaderAreaData();
const onFinish = ({ selectedOptions }: {
  selectedOptions: CascaderOption[],
  tabIndex: number,
  value: string
}) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option: CascaderOption) => option.text).join('/');
};
</script>

<style></style>